---
title: Routage
description: Une introduction à l'utilisation du routage avec Astro.
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';
import RecipeLinks from "~/components/RecipeLinks.astro"
import Since from '~/components/Since.astro'
import ReadMore from '~/components/ReadMore.astro'

Astro utilise **le routage basé sur les fichiers** pour générer vos URLs au moment de la compilation en fonction de la structure des fichiers dans le répertoire `src/pages/` de votre projet.

## Naviguer entre les pages

Astro utilise des éléments HTML standard [`<a>`](https://developer.mozilla.org/fr-FR/docs/Web/HTML/Element/a) pour naviguer entre les routes. Il n'y a pas de composant `<Link>` spécifique au framework.

```astro title="src/pages/index.astro"
<p>En savoir plus <a href="/about/">à propos</a> d'Astro !</p>

<!-- Avec `base: "/docs"` configuré  -->
<p>Apprenez-en plus dans notre section <a href="/docs/reference/">référence</a> !</p> 
```

## Routes statiques

Les [composants de page](/fr/basics/astro-pages/) `.astro` ainsi que les fichiers Markdown et MDX (`.md`, `.mdx`) dans le répertoire `src/pages/` **deviennent automatiquement des pages de votre site web**. La route de chaque page correspond à son chemin et à son nom de fichier dans le répertoire `src/pages/`.

```diff
# Exemple : Routes statiques
src/pages/index.astro           -> monsite.com/
src/pages/a-propos.astro        -> monsite.com/a-propos
src/pages/a-propos/index.astro  -> monsite.com/a-propos
src/pages/a-propos/moi.astro    -> monsite.com/a-propos/moi
src/pages/articles/1.md         -> monsite.com/articles/1
```

:::tip
Il n'y a pas de « configuration de routage » séparée à maintenir dans un projet Astro ! Lorsque vous ajoutez un fichier au répertoire `/src/pages`, une nouvelle route est automatiquement créée pour vous. Dans les compilations statiques, vous pouvez personnaliser le format de sortie du fichier en utilisant l'option de configuration [`build.format`](/fr/reference/configuration-reference/#buildformat).
:::

## Routes dynamiques

Un fichier de page Astro peut spécifier des paramètres de route dynamiques dans son nom de fichier pour générer des pages correspondantes. Par exemple, vous pouvez créer un fichier `authors/[author].astro` qui génère une page de biographie pour chaque auteur de votre blog. `author` devient un _paramètre_ accessible depuis l'intérieur de la page.

Dans le mode statique par défaut d'Astro, ces pages sont générées au moment de la compilation, et vous devez donc prédéterminer la liste des auteurs (`author`) qui obtiendront un fichier correspondant. En mode SSR, une page sera générée sur demande pour toute route correspondante.

### Mode statique (SSG)

Parce que toutes les routes doivent être déterminées au moment de la compilation, une route dynamique doit exporter une fonction `getStaticPaths()` qui renvoie un tableau d'objets avec une propriété `params`. Chacun de ces objets générera une route correspondante.

`[dog].astro` définit le paramètre dynamique `dog` dans son nom de fichier, donc les objets retournés par `getStaticPaths()` doivent inclure `dog` dans leurs `params`. La page peut alors accéder à ce paramètre en utilisant `Astro.params`.

```astro title="src/pages/dogs/[dog].astro"
---
export function getStaticPaths() {
  return [
    { params: { dog: "clifford" }},
    { params: { dog: "rover" }},
    { params: { dog: "spot" }},
  ];
}

const { dog } = Astro.params;
---
<div>Bon chien, {dog} !</div>
```

Cela va générer trois pages : `/dogs/clifford`, `/dogs/rover`, et `/dogs/spot`, chacune affichant le nom du chien correspondant.

Le nom du fichier peut inclure plusieurs paramètres, qui doivent tous être inclus dans les objets `params` de `getStaticPaths()` :

```astro title="src/pages/[lang]-[version]/info.astro"
---
export function getStaticPaths() {
  return [
    { params: { lang: "en", version: "v1" }},
    { params: { lang: "fr", version: "v2" }},
  ];
}

const { lang, version } = Astro.params;
---
```

Cela va générer `/en-v1/info` et `/fr-v2/info`.

Les paramètres peuvent être inclus dans des parties séparées du chemin, ainsi nous pourrions utiliser `src/pages/[lang]/[version]/info.astro` avec la même fonction `getStaticPaths()` pour générer `/en/v1/info` et `/fr/v2/info`.

#### Décodage des paramètres (`params`)

Les paramètres (`params`) renvoyés par la fonction `getStaticPaths()` ne sont pas décodés. Utilisez [`decodeURI()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/decodeURI) lorsque vous devez décoder les valeurs des paramètres.

```astro title="src/pages/[slug].astro"
--- 
export function getStaticPaths() {
  return [
    { params: { slug: decodeURI("%5Bpage%5D") }}, // est décodé en "[page]"
  ]
}
---
```

<ReadMore>En apprendre plus sur [`getStaticPaths()`](/fr/reference/routing-reference/#getstaticpaths).</ReadMore>

<RecipeLinks slugs={["fr/recipes/i18n"]} />

### Paramètres du reste

Si vous avez besoin de plus de flexibilité dans le routage de vos URL, vous pouvez utiliser un [paramètre du reste](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Functions/rest_parameters) (`[...path]`) dans votre nom de fichier `.astro` pour faire correspondre les chemins de fichiers de n'importe quelle profondeur :

```astro title="src/pages/sequences/[...path].astro"
---
export function getStaticPaths() {
  return [
    { params: { path: "un/deux/trois" }},
    { params: { path: "quatre" }},
    { params: { path: undefined }}
  ]
}

const { path } = Astro.params;
---
```

Cela générera `/sequences/un/deux/trois`, `/sequences/quatre`, et `/sequences`. (Définir le paramètre du reste sur `undefined` lui permet de correspondre à la page de premier niveau).

Les paramètres du reste peuvent être utilisés avec **d'autres paramètres nommés**. Par exemple, nous pourrions représenter la visionneuse de fichiers de GitHub avec une route dynamique comme celle-ci :

```
/[org]/[repo]/tree/[branch]/[...file]
```

Dans cet exemple, une requête pour `/withastro/astro/tree/main/docs/public/favicon.svg` serait divisée en paramètres nommés suivants :

```js
{
	org: "withastro",
	repo: "astro",
	branch: "main",
	file: "docs/public/favicon.svg"
}
```

#### Exemple : Pages dynamiques à plusieurs niveaux

Ici, nous utilisons un paramètre du reste (`[...slug]`) et la fonctionnalité [`props`](/fr/reference/routing-reference/#transmission-de-données-avec-props) de `getStaticPaths()` pour générer des pages pour des slugs de différentes profondeurs.

```astro title="src/pages/[...slug].astro"
---
export function getStaticPaths() {
  const pages = [
    {
      slug: undefined,
      title: "Magasin Astro",
      text: "Bienvenue dans le magasin Astro !",
    },
    {
      slug: "products",
      title: "Produits Astro",
      text: "Nous avons beaucoup de produits pour vous",
    },
    {
      slug: "products/astro-handbook",
      title: "L'ultime manuel d'Astro",
      text: "Si vous voulez apprendre Astro, vous devez lire ce livre.",
    },
  ];

  return pages.map(({ slug, title, text }) => {
    return {
      params: { slug },
      props: { title, text },
    };
  });
}

const { title, text } = Astro.props;
---
<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>{text}</p>
  </body>
</html>
```

### Routes dynamiques à la demande

Pour [le rendu à la demande](/fr/guides/on-demand-rendering/) avec un adaptateur, les routes dynamiques sont définies de la même manière : incluez des crochets `[param]` ou `[...path]` dans vos noms de fichiers pour faire correspondre des chaînes de caractères ou des chemins arbitraires. Cependant, comme les routes ne sont plus générées à l'avance, la page sera servie à n'importe quelle route correspondante. Comme il ne s'agit pas de routes « statiques », `getStaticPaths` ne doit pas être utilisé.

Pour les routes rendues à la demande, un seul paramètre du reste utilisant la syntaxe de décomposition peut être utilisé dans le nom de fichier (par exemple `src/pages/[locale]/[...slug].astro` ou `src/pages/[...locale]/[slug].astro`, mais pas `src/pages/[...locale]/[...slug].astro`).

```astro title="src/pages/resources/[resource]/[id].astro"
---
export const prerender = false; // Pas nécessaire en mode `server`
const { resource, id } = Astro.params;
---
<h1>{resource}: {id}</h1>
```

Cette page sera servie pour toute valeur de `resource` et `id` : `resources/users/1`, `resources/colors/blue`, etc.

#### Modification de l'exemple `[...slug]` pour le mode SSR

Comme les pages SSR ne peuvent pas utiliser `getStaticPaths()`, elles ne peuvent pas recevoir de props. L'[exemple précédent](#exemple--pages-dynamiques-à-plusieurs-niveaux) peut être adapté au mode SSR en recherchant la valeur du paramètre `slug` dans un objet. Si la route est à la racine (« / »), le paramètre `slug` sera `undefined`. Si la valeur n'existe pas dans l'objet, nous redirigeons vers une page 404.

```astro title="src/pages/[...slug].astro"
---
const pages = [
	{
		slug: undefined,
		title: 'Magasin Astro',
		text: 'Bienvenue dans le magasin Astro !',
	},
	{
		slug: 'products',
		title: 'Produits Astro',
		text: 'Nous avons beaucoup de produits pour vous',
	},
	{
		slug: 'products/astro-handbook',
		title: "L'ultime manuel d'Astro",
		text: 'Si vous voulez apprendre Astro, vous devez lire ce livre.',
	}
];

const { slug } = Astro.params;
const page = pages.find((page) => page.slug === slug);
if (!page) return Astro.redirect("/404");
const { title, text } = page;
---
<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>{text}</p>
  </body>
</html>
```

## Redirections

Parfois, vous devrez rediriger vos lecteurs vers une nouvelle page, soit de manière permanente parce que la structure de votre site a changé, soit en réponse à une action telle que la connexion à une route authentifiée.

Vous pouvez définir des règles pour [rediriger les utilisateurs vers des pages déplacées de façon permanente](#redirections-configurées) dans votre configuration Astro. Ou [rediriger les utilisateurs dynamiquement](#redirections-dynamiques) au fur et à mesure qu'ils utilisent votre site.

### Redirections configurées

<p><Since v="2.9.0" /></p>

Vous pouvez spécifier une correspondance de redirections permanentes dans votre configuration Astro avec la valeur [`redirects`](/fr/reference/configuration-reference/#redirects).

Pour les redirections internes, il s'agit d'une association entre le chemin d'une ancienne route vers la nouvelle route. Depuis Astro v5.2.0, il est également possible de rediriger vers des URL externes qui commencent par `http` ou `https` et [pouvant être analysées](https://developer.mozilla.org/en-US/docs/Web/API/URL/canParse_static) :

```js title="astro.config.mjs" {4-7}
import { defineConfig } from "astro/config";

export default defineConfig({
  redirects: {
    "/ancienne-page": "/nouvelle-page",
    "/blog": "https://example.com/blog"
  }
});
```

Ces redirections suivent [les mêmes règles de priorité que les routes basées sur des fichiers](#ordre-de-priorité-des-routes) et auront toujours une priorité inférieure à celle d'une page existante ayant le même nom dans votre projet. Par exemple, `/ancienne-page` ne redirigera pas vers `/nouvelle-page` si votre projet contient le fichier `src/pages/ancienne-page.astro`.

Les routes dynamiques sont autorisées tant que les nouvelles et les anciennes routes contiennent les mêmes paramètres, par exemple :

```js
{
  "/blog/[...slug]": "/articles/[...slug]"
}
```

En utilisant SSR ou un adaptateur statique, vous pouvez également fournir un objet comme valeur, ce qui vous permet de spécifier le code `status` en plus de la nouvelle `destination` :

```js title="astro.config.mjs" {5-8}
import { defineConfig } from "astro/config";

export default defineConfig({
  redirects: {
    "/ancienne-page": {
      status: 302,
      destination: "/nouvelle-page"
    },
    "/news": {
      status: 302,
      destination: "https://example.com/news"
    }
  }
});
```

Lors de l'exécution de `astro build`, Astro produira des fichiers HTML avec la balise [meta refresh](https://developer.mozilla.org/fr-FR/docs/Web/HTML/Element/meta#examples) par défaut. Les adaptateurs pris en charge écriront plutôt le fichier de configuration de l'hôte avec les redirections.

Le code de statut est `301` par défaut. Lors de la création de fichiers HTML, ce code n'est pas utilisé par le serveur.

### Redirections dynamiques

Dans la variable globale `Astro`, la méthode `Astro.redirect` vous permet de rediriger vers une autre page dynamiquement. Vous pouvez le faire après avoir vérifié si l'utilisateur est connecté en récupérant sa session à partir d'un cookie.

```astro title="src/pages/account.astro" {8}
---
import { isLoggedIn } from "../utils";

const cookie = Astro.request.headers.get("cookie");

// Si l'utilisateur n'est pas connecté, le rediriger vers la page de connexion.
if (!isLoggedIn(cookie)) {
  return Astro.redirect("/login");
}
---
```

Étant donné qu'Astro utilise le [streaming HTML](/fr/guides/on-demand-rendering/#streaming-html) dans le rendu à la demande, les redirections doivent être effectuées au niveau de la page, et non à l'intérieur des composants enfants.

## Réécritures

<p><Since v="4.13.0" /></p>

Une réécriture vous permet de servir une route différente sans rediriger le navigateur vers une page différente. Le navigateur affichera l'adresse originale dans la barre d'URL, mais il affichera à la place le contenu de l'URL fournie à [`Astro.rewrite()`](/fr/reference/api-reference/#rewrite).

:::tip
Pour un contenu qui a été déplacé de façon permanente, ou pour diriger l'utilisateur vers une page différente avec une nouvelle URL (par exemple, le tableau de bord d'un utilisateur après sa connexion), utilisez plutôt une [redirection](#redirections).
:::

Les réécritures peuvent être utiles pour afficher le même contenu sur plusieurs chemins (par exemple, `/produits/chaussures/homme/` et `/produits/homme/chaussures/`) sans avoir à maintenir deux fichiers sources différents.

Les réécritures sont également utiles à des fins de référencement et d'expérience utilisateur. Elles vous permettent d'afficher un contenu qui, autrement, nécessiterait de rediriger votre visiteur vers une autre page ou renverrait un statut 404. Une utilisation courante des réécritures consiste à afficher le même contenu localisé pour différentes variantes d'une langue.

L'exemple suivant utilise une réécriture pour afficher la version `/es/` d'une page lorsque le chemin URL `/es-CU/` (espagnol cubain) est visité. Lorsqu'un visiteur se rend à l'URL `/es-cu/articles/introduction`, Astro affiche le contenu généré par le fichier `src/pages/es/articles/introduction.astro`.

```astro title="src/pages/es-cu/articles/introduction.astro"
---
return Astro.rewrite("/es/articles/introduction");
---
```

Utilisez `context.rewrite()` dans vos fichiers de destination pour rediriger vers une autre page :

```js title="src/pages/api.js"
export function GET(context) {
  if (!context.locals.allowed) {
    return context.rewrite("/");
  }
}
```

Si l'URL transmise à `Astro.rewrite()` génère une erreur au moment de l'exécution, Astro affichera l'erreur en superposition en mode développement et renverra un code d'état 500 en production. Si l'URL n'existe pas dans votre projet, un code d'état 404 sera renvoyé.

Vous pouvez intentionnellement créer une réécriture pour afficher votre page `/404`, par exemple pour indiquer qu'un produit de votre boutique e-commerce n'est plus disponible :

```astro title="src/pages/[item].astro"
---
const { item } = Astro.params;

if (!itemExists(item)) {
  return Astro.rewrite("/404");
}
---
``` 

Vous pouvez également procéder à une réécriture conditionnelle sur la base d'un statut de réponse HTTP, par exemple pour afficher une certaine page de votre site lorsque vous visitez une URL qui n'existe pas :

```js title="src/middleware.mjs"
export const onRequest = async (context, next) => {
  const response = await next();
  if (response.status === 404) {
    return context.rewrite("/");
  }
  return response;
}
``` 

Avant d'afficher le contenu du chemin de réécriture spécifié, la fonction `Astro.rewrite()` déclenche une nouvelle phase complète de rendu. Celle-ci ré-exécute tout middleware pour la nouvelle route/requête.

<ReadMore>Voir la référence de l'API [`Astro.rewrite()`](/fr/reference/api-reference/#rewrite) pour plus d'informations.</ReadMore>

## Ordre de priorité des routes

Il est possible que plusieurs routes définies tentent de générer le même chemin d'URL. Par exemple, toutes ces routes pourraient générer `/posts/create` :

<FileTree>
- src/pages/
  - [...slug].astro
  - posts/
    - create.astro
    - [page].astro
    - [pid].ts
    - [...slug].astro
</FileTree>

Astro a besoin de savoir quelle route doit être utilisée pour générer la page. Pour ce faire, il les trie dans l'ordre selon les règles suivantes :

- Les [routes réservées](#routes-réservées) d'Astro
- Les routes avec plus de segments de chemin seront prioritaires sur les routes moins spécifiques. Dans l'exemple ci-dessus, toutes les routes sous `/posts/` sont prioritaires sur `/[...slug].astro` à la racine.
- Les routes statiques sans paramètres de chemin sont prioritaires sur les routes dynamiques. Par exemple, `/posts/create.astro` est prioritaire sur toutes les autres routes de l'exemple.
- Les routes dynamiques utilisant des paramètres nommés sont prioritaires sur les paramètres restants. Par exemple, `/posts/[page].astro` est prioritaire sur `/posts/[...slug].astro`.
- Les routes dynamiques pré-rendues ont la priorité sur les routes dynamiques du serveur.
- Les points de terminaison ont la priorité sur les pages.
- Les routes basées sur des fichiers ont priorité sur les redirections.
- Si aucune des règles ci-dessus ne décide de l'ordre, les routes sont triées par ordre alphabétique en fonction des paramètres régionaux par défaut de votre installation Node.

Dans l'exemple ci-dessus, voici quelques exemples de la manière dont les règles feront correspondre une URL demandée à la route utilisée pour générer le code HTML :

- `pages/post/create.astro` - Ne générera que `/post/create`.
- `pages/post/[pid].ts` - Générera `/post/abc`, `/post/xyz`, etc. Mais pas `/post/create`.
- `pages/posts/[page].astro` - Générera `/posts/1`, `/posts/2`, etc. Mais pas `/posts/create`, `/posts/abc` ni `/posts/xyz`.
- `pages/post/[...slug].astro` - Générera `/post/1/2`, `/post/a/b/c`, etc. Mais pas `/post/create`, `/post/1`, `/post/abc` etc.
- `pages/[...slug].astro` - Générera `/abc`, `/xyz`, `/abc/xyz`, etc. Mais pas `/posts/create`, `/posts/1`, `/posts/abc`, etc.

### Routes réservées

Les routes internes ont la priorité sur les routes définies par l'utilisateur ou par l'intégration, car elles sont nécessaires au déroulement des fonctionnalités d'Astro. Les routes réservées d'Astro sont les suivantes :

- `_astro/` : Fournit toutes les ressources statiques au client, y compris les documents CSS, les scripts client intégrés, les images optimisées et toutes les ressources Vite.
- `_server_islands/` : Sert les composants dynamiques différés dans un [îlot de serveur](/fr/guides/server-islands/).
- `_actions/` : Sert toutes les [actions](/fr/guides/actions/) définies.

## Pagination

Astro prend en charge la pagination intégrée pour les grandes collections de données qui doivent être divisées en plusieurs pages. Astro génère les propriétés de pagination courantes, y compris les URL des pages précédentes/suivantes, le nombre total de pages, etc.

Les noms des routes paginées doivent utiliser la même syntaxe de `[crochets]` que les routes dynamiques standard. Par exemple, le nom de fichier `/astronauts/[page].astro` générera des routes pour `/astronauts/1`, `/astronauts/2`, etc, là où `[page]` est le numéro de la page générée.

Vous pouvez utiliser la fonction `paginate()` pour générer ces pages pour un tableau de valeurs comme ceci :

```astro /{ (paginate) }/ /paginate\\(.*\\);/ /(?<=const.*)(page)/ /page\\.[a-zA-Z]+/
---
// src/pages/astronauts/[page].astro
export function getStaticPaths({ paginate }) {
  const astronautPages = [
    { astronaut: "Neil Armstrong" },
    { astronaut: "Buzz Aldrin" },
    { astronaut: "Sally Ride" },
    { astronaut: "John Glenn" },
  ];

  // Génère des pages à partir de notre tableau d'astronautes, avec 2 par page
  return paginate(astronautPages, { pageSize: 2 });
}
// Toutes les données paginées sont passées dans la propriété « page »
const { page } = Astro.props;
---
<!-- Affiche le numéro de la page actuelle. `Astro.params.page` peut aussi être utilisé ! -->
<h1>Page {page.currentPage}</h1>
<ul>
  <!-- Liste les informations sur les astronautes contenu dans le tableau -->
  {page.data.map(({ astronaut }) => <li>{astronaut}</li>)}
</ul>
```

Cela génère les pages suivantes, avec deux éléments par page :

- `/astronauts/1` - Page 1 : Affiche « Neil Armstrong » et « Buzz Aldrin »
- `/astronauts/2` - Page 2 : Affiche « Jean-Loup Chrétien » et « Thomas Pesquet »

### La propriété `page`

Lorsque vous utilisez la fonction `paginate()`, chaque page recevra ses données via une propriété `page`. Celle-ci possède de nombreuses propriétés utiles que vous pouvez utiliser pour créer des pages et des liens entre elles :

```ts
interface Page<T = any> {
	/** Tableau contenant la tranche de données de la page que vous avez transmise à la fonction paginate() */
	data: T[];
	/** Métadonnées */
	/** Nombre du premier élément de la page, à partir de 0 */
	start: number;
	/** Nombre du dernier élément de la page, à partir de 0 */
	end: number;
	/** Nombre total de résultats */
	total: number;
	/** Numéro de la page actuelle, à partir de 1 */
	currentPage: number;
	/** Nombre d'éléments par page (par défaut : 10) */
	size: number;
	/** Nombre de la dernière page */
	lastPage: number;
	url: {
		/** URL de la page actuelle */
		current: string;
		/** URL de la page précédente (s'il y en a une) */
		prev: string | undefined;
		/** URL de la page suivante (s'il y en a une) */
		next: string | undefined;
		/** URL de la première page (si la page actuelle n'est pas la première page) */
		first: string | undefined;
		/** URL de la dernière page (si la page actuelle n'est pas la dernière) */
		last: string | undefined;
	};
}
```

L'exemple suivant affiche les informations actuelles de la page ainsi que des liens pour naviguer entre les pages :

```astro /(?<=const.*)(page)/ /page\\.[a-zA-Z]+(?:\\.(?:prev|next|first|last))?/
---
// src/pages/astronauts/[page].astro
// Paginer la même liste d'objets `{ astronaut }` que dans l'exemple précédent
export function getStaticPaths({ paginate }) { /* ... */ }
const { page } = Astro.props;
---
<h1>Page {page.currentPage}</h1>
<ul>
  {page.data.map(({ astronaut }) => <li>{astronaut}</li>)}
</ul>
{page.url.first ? <a href={page.url.first}>Début</a> : null}
{page.url.prev ? <a href={page.url.prev}>Précédent</a> : null}
{page.url.next ? <a href={page.url.next}>Suivant</a> : null}
{page.url.last ? <a href={page.url.last}>Fin</a> : null}
```

<ReadMore>En savoir plus sur [la propriété `page` de la pagination](/fr/reference/routing-reference/#la-propriété-de-pagination-page).</ReadMore>

### Pagination imbriquée

Un cas d'utilisation plus avancé de la pagination est la **pagination imbriquée**. Elle se produit lorsque la pagination est combinée à d'autres paramètres de route dynamiques. Vous pouvez utiliser la pagination imbriquée pour regrouper votre collection paginée par propriété ou étiquette.

Par exemple, si vous souhaitez regrouper vos articles Markdown paginés par une étiquette, vous utiliserez la pagination imbriquée en créant une page `/src/pages/[tag]/[page].astro` qui correspondra aux URL suivantes :

- `/red/1` (tag=red)
- `/red/2` (tag=red)
- `/blue/1` (tag=blue)
- `/green/1` (tag=green)

La pagination imbriquée fonctionne en renvoyant un tableau de résultats paginés (`paginate()`) à partir de `getStaticPaths()`, un pour chaque groupe.

Dans l'exemple suivant, nous allons implémenter la pagination imbriquée pour générer les URLs listées ci-dessus :

```astro /(?:[(]|=== )(tag)/ "params: { tag }," /const [{ ]*(page|params)/
---
// src/pages/[tag]/[page].astro
export function getStaticPaths({ paginate }) {
  const allTags = ["red", "blue", "green"];
  const allPosts = Object.values(import.meta.glob("../pages/post/*.md", { eager: true }));
  // Pour chaque étiquette, renvoyer un résultat paginé (`paginate()`).
  // Assurez-vous de passer `{ params: { tag } }` à la fonction `paginate()`
  // afin qu'Astro sache à quel groupe d'étiquettes le résultat est destiné.
  return allTags.map((tag) => {
    const filteredPosts = allPosts.filter((post) => post.frontmatter.tag === tag);
    return paginate(filteredPosts, {
      params: { tag },
      pageSize: 10
    });
  });
}

const { page } = Astro.props;
const params = Astro.params;
```

## Exclure des pages

Vous pouvez exclure des pages ou des répertoires dans `src/pages` de la compilation en préfixant leurs noms par un trait de soulignement (`_`). Les fichiers avec le préfixe `_` ne seront pas reconnus par le routeur et ne seront pas placés dans le répertoire `dist/`.

Cela vous permet de créer des pages privées, et aussi de placer les tests, les utilitaires et les composants dans les pages correspondantes, en les empêchant d'être compilés dans des fichiers `.html` et placés dans le répertoire `dist/`.

Dans cet exemple, seuls `src/pages/index.astro` et `src/pages/projets/projet1.md` seront compilées comme routes de pages et fichiers HTML.

<FileTree>
- src/pages/
  - _répertoire-caché/
    - page1.md
    - page2.md
  - _page-cachée.astro
  - **index.astro**
  - projets/
    - _UnComposant.astro
    - _utilitaires.js
    - **projet1.md**
</FileTree>
